// 因为链入js的位置是head标签链入的，所以为了我们能正确的得到页面中的元素，需要使用load事件来等待页面加载完毕之后
// 再去进行获取元素等操作
window.addEventListener('load',function(){
    // A.显示和隐藏左右箭头,悬停focus元素的时候，显示箭头，离开focus元素的时候，隐藏箭头
    // A.1 获取需要使用的元素
    var focus = document.querySelector('.focus');
    var left = document.querySelector('.focus .arrow-l')
    var right = document.querySelector('.focus .arrow-r')
    // B.1 获取轮播图元素ul，获取小圆点的ol
    var ul = document.querySelector('.focus ul')
    var ol = document.querySelector('.focus ol')
    // D.4 获取一张轮播图的宽度，也是focus盒子的宽度
    var focusWidth = focus.offsetWidth

    // A.2 在鼠标悬停的时候显示，在鼠标离开的时候隐藏
    focus.addEventListener('mouseenter',function(){
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer)
    })

    focus.addEventListener('mouseleave',function(){
        left.style.display = 'none';
        right.style.display = 'none';
        timer = setInterval(function(){
            right.click();
        },2000)
    })

    // B.根据轮播图的数量动态生成小圆点。
    // B.2 编写一个循环，循环ul里面的li元素，根据ul里面的li元素的个数创建ol里面的小li
    for(var i=0;i<ul.children.length;i++){
        
        var li = document.createElement('li');
        ol.appendChild(li);
        // D.1.1 给小圆点li添加序号，通过自定义属性添加序号
        li.setAttribute('data-index',i)
        // C.小圆点点击之后，实现排他选中小圆点的效果
        // C.1 先给小圆点添加点击事件
        li.addEventListener('click',function(){
            // C.2 排他，干掉所有人
            for(var i=0;i<ol.children.length;i++){
                ol.children[i].className = ''
            }
            // document.querySelector('.focus ol .current').className = ''
            // C.3 留下我自己，被点击的那个li需要添加current类名
            this.className = 'current'

            // D.小圆点点击之后，实现轮播图的滚动效果
            // 点击第几个小圆点，就轮播到第几张轮播图
            // 轮播图轮播的功能，其实就是更改ul盒子的left值，让对应的li元素被显示出来。
            // D.1 获取我到底点击的是哪一个小圆点。
            // D.1.2 根据data-index来得知我们到底点击的是哪一个小圆点
            var index = this.getAttribute('data-index')
            console.log(index)
            // 将当前点击的小圆点的索引，赋值给num和circle保证下一次轮播不会出问题
            num = circle = index
            // D.2 找到index对应的轮播图进行展示，其实就是移动ul盒子
            // ul.style.left = - index * 721 + 'px'
            // D.3 利用之前封装的animate函数进行丝滑的轮播
            animate( ul, -index * focusWidth )
        })
    }
    // B.3 默认选中第一个li元素
    ol.children[0].className = 'current'

    // E.6 为了实现无缝轮播，需要将第一张图片li复制一份添加到所有li的后面
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)

    // E.2 创建一个变量，用来记录当前播放的轮播图的索引
    var num = 0;// 从第一张轮播图开始。
    // F.1 创建一个变量，用来记录小圆点的索引
    var circle = 0;
    // E.点击右箭头，播放下一张轮播图，并且实现无缝轮播。
    // E.1 给右箭头添加点击事件
    right.addEventListener('click',function(){
        // E.5 判断一下，是不是已经播放到了最后一张轮播图，如果已经到了最后一张轮播图，直接切换到第一张轮播图
        if(num == ul.children.length - 1){
            // E.7 将ul盒子瞬间切换到第一张图片li
            ul.style.left = 0
            num = 0;
        }
        // E.3 将索引 + 1
        num++;

        // E.4 利用之前封装的animate函数进行丝滑的轮播,轮播到num索引指定的轮播图
        animate( ul, -num * focusWidth )
        // F.点击右箭头之后，小圆点也要跟着进行切换
        // F.2 将小圆点索引 + 1
        circle++;
        // F.4 判断一下小圆点的索引是不是已经到了最后一个小圆点，如果到了，就重置索引
        if(circle == ol.children.length){
            circle = 0;
        }

        // F.3 干掉所有人，留下circle索引对应的小圆点，去添加cureent类名
        document.querySelector('.focus ol .current').className = ''
        ol.children[circle].className = 'current'
    })

    // G.点击左箭头，播放上一张轮播图，实现无缝轮播
    // G.1 给左箭头添加点击事件
    left.addEventListener('click',function(){
        // E.5 判断一下，是不是已经播放到了第一张轮播图，如果已经到了第一张轮播图，直接切换到最后一张轮播图
        if(num == 0){
            // E.7 将ul盒子瞬间切换到最后一张图片li
            ul.style.left = -(ul.children.length - 1) * focusWidth + 'px'
            num = ul.children.length - 1;
        }
        // E.3 将索引 - 1
        num--;

        // E.4 利用之前封装的animate函数进行丝滑的轮播,轮播到num索引指定的轮播图
        animate( ul, -num * focusWidth )
        // F.点击右箭头之后，小圆点也要跟着进行切换
        // F.2 将小圆点索引 - 1
        circle--;
        // F.4 判断一下小圆点的索引是不是已经到了第一个小圆点，如果到了，就重置索引为最后一个小圆点
        if(circle < 0){
            circle = ol.children.length - 1;
        }

        // F.3 干掉所有人，留下circle索引对应的小圆点，去添加cureent类名
        document.querySelector('.focus ol .current').className = ''
        ol.children[circle].className = 'current'
    })

    // H.使用定时器来自动播放轮播图，鼠标悬停轮播图的时候关闭定时器，鼠标离开轮播图范围重新开启定时器。
    var timer = setInterval(function(){
        right.click();
    },2000)

})